<script lang="ts" setup>
import {ITableHeader} from '@/interface/table'
import {computed} from 'vue'
import BaseIcon from '@/components/BaseIcon/index.vue'

defineProps<{ tableHeader: ITableHeader[] }>()
const defaultPrimary = import.meta.env.VITE_DEFAULT_PRIMARY

const filterDict = computed(() => (row: any, item: any) => {
	if (item.dictProps) {
		return item.dictList?.find((el: any) => el[item.dictProps.value] === row[item.prop])?.[item.dictProps.label]
	} else {
		return item.dictList?.find((el: any) => el['value'] === row[item.prop])?.['label']
	}
})

const handelTagType = (item: any, val: string | number) => {
	if (item.tagType) {
		if (typeof item.tagType === 'string') {
			return item.tagType
		} else {
			return item.tagType[val]
		}
	}
}
</script>

<template>
	<el-table-column
		v-for="(item, index) in tableHeader.filter((val) => !val.hidden)"
		:key="index"
		align="center"
		show-overflow-tooltip
		v-bind="item"
	>
		<template #default="scope">
			<template v-if="item.childrenList && item.childrenList.length">
				{{}}
				<TableColumn :table-header="item.childrenList">
					<template v-for="name in Object.keys($slots)" :key="name" #[name]="scope">
						<slot :name="name" v-bind="scope"/>
					</template>
				</TableColumn>
			</template>
			<slot
				v-else-if="item.slotName"
				:name="item.slotName"
				:scope="{ row: scope.row, item: item, index: scope.$index }"
			/>
			<div v-else-if="item.textType === 'html'" v-html="scope.row[item.prop!]"/>
			<el-text v-else-if="item.textType === 'dict'">
				{{ filterDict(scope.row, item) }}
			</el-text>
			<div v-else-if="item.textType === 'icon'">
				<base-icon :icon="scope.row[item.prop!]" color="#f00"/>
			</div>
			<div v-else-if="item.textType === 'img'">
				<el-image
					v-if="typeof scope.row[item.prop!] === 'string'"
					:preview-src-list="[scope.row[item.prop!]]"
					:src="scope.row[item.prop!]"
					preview-teleported
				/>
				<el-image
					v-else
					:preview-src-list="scope.row[item.prop!]"
					:src="scope.row[item.prop!][0]"
					preview-teleported
				/>
			</div>
			<div v-else-if="item.textType === 'tag'">
				<el-tag
					:effect="item.tagEffect"
					:round="item.tagRound"
					:type="handelTagType(item, scope.row[item.prop!])"
				>
					{{ item.dictList ? filterDict(scope.row, item) : scope.row[item.prop!] }}
				</el-tag>
			</div>
			<el-text v-else-if="item.textType === 'textColor'" :style="{ color: item.color || defaultPrimary }">
				{{ scope.row[item.prop!] }}
			</el-text>
			<el-text
				v-else-if="item.textType === 'click'"
				:style="{ color: item.color || '#1a9bef', cursor: 'pointer' }"
				@click="item.handleClick!(scope.row, item, scope.$index)"
			>
				{{ scope.row[item.prop!] }}
			</el-text>
		</template>
	</el-table-column>
</template>

<style lang="scss" scoped></style>
